<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>测试结果界面</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>

    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>

    <script src="js/html2canvas.min.js"></script>
    <script src="js/jspdf.min.js"></script>
    <style>
        #testReport{
            background: white;
            margin-left: 120px;
            margin-right: 120px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
<!--邮箱信息-->
<input hidden id="updater" name="updater">
<form class="layui-form" action="" style="display: none" id="addMail" lay-filter="addMailFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="email" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">信息</label>
        <div class="layui-input-block">
            <textarea name="text" placeholder="请输入内容" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="addMailFilter">立即提交</button>
        </div>
    </div>
</form>
<!--查询-->
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="selectFilter">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="myButton">重置</button>
        </div>
    </div>
</form>
<!--表头按钮-->
<script type="text/html" id="toolDemo">
    <a class="layui-btn layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<form id="deng" hidden class="layui-form" action=""><i class="layui-icon layui-icon-loading"></i><i>请稍等...</i></form>
<div  id="testReport" style="display: none">
    <i class="layui-icon layui-icon-download-circle" style="font-size: 50px; color: #ec0c0c;text-align: center" onclick="download()"></i>
    <div id="the1">
    <div id="pieDemo" style="width: 500px;height: 450px;margin: 2rem auto"  ></div>
    <div style="margin-left: 100px;margin-right: 100px">
        <h1 style="text-align: center">性格分析</h1>
        <a>
            <div style="text-align: center"><h3 style="color: red">红色</h3>
                积极乐观 情绪波动大起大落<br>
                真诚主动 开玩笑不分场合<br>
                善于表达 疏于兑现承诺<br>
                富有感染力 这山望着那山高<br></div>
            <h4>【性格优势】：</h4>
            <h5>作为个体：</h5>高度乐观的积极心态。喜欢自己，也容易接纳别人。把生命当作值得享受的经验。喜欢新鲜、变化和刺激。经常开心，追求快乐。情感丰富而外露。自由自在，不受拘束。喜欢开玩笑和调侃。别出心裁，与众不同。表现力强。容易受到人们的喜欢和欢迎。生动活泼，好奇心强。
            <h5>沟通特点：</h5>才思敏捷，善于表达。喜欢通过肢体上的接触传达亲密情感。容易与人攀谈。发生冲突时，能直接表白。人越多越亢奋。演讲和舞台表演的高手。乐于表达自己的看法。
            <h5>作为朋友：</h5>真诚主动，热情洋溢。喜欢交友，善于与陌生人互动。擅长搞笑，是带来乐趣的伙伴。容易原谅自己和别人，不记仇。富有个人魅力。乐于助人。有错就认，很快道歉。喜欢接受别人的肯定和不吝赞美。
            <h5>对待工作和事业：</h5>工作主动，寻找新任务。富有感染力，能够吸引他人参与。激发团队的热情合作心和进取心，重视团队合作的感觉。令人愉悦的工作伙伴。完成短期目标时，极富爆发力。信任他人。善于赞美和鼓励，是天生的激励者。不喜欢太多的规定束缚，富有创意。工作以活泼化、丰富化的方式进行。反应快，闪电般开始。
            <h4>【性格过当】：</h4>
            <h5>作为个体:</h5>情绪波动大起大落。变化无常，随意性强。鲁莽冲动，轻信他人，容易上当受骗。虚荣心强，不肯吃苦，贪图享受。喜欢走捷径，虎头蛇尾，不能坚持。粗心大意，杂乱无章。不肯承担责任，期待有别人为自己的人生负责。缺乏自控，毫无纪律。容易原谅自己，不吸取教训。不稳定和散漫。拒绝长大。借放纵来麻痹自己的痛苦和烦恼，而不去认真思考生命的本质。
            <h5>沟通特点：</h5>说话少经大脑思考，脱口而出。对于严肃和敏感的事情也会开玩笑。炫耀自己，夺人话题。注意力分散，不能专注倾听，插话。吹牛不打草稿，疏于兑现承诺。忘记别人说过什么，自己讲过的话也经常重复。口无遮拦，不保守秘密。不可靠，光说不练。夸大吹嘘自己的成功。
            <h5>作为朋友：</h5>缺少分寸，过度的玩笑和热情。只想当主角。谈论自己感兴趣的话题，对和自己无关的话题心不在焉。插嘴打断别人谈话。健忘多变。经常会忘记老朋友。有极强的依赖性，脆弱而不能独立。好心办坏事。
            <h5>对待工作事业：</h5>跳槽频率高，这山望着那山高。没有规划，随意性强。没有焦点，把精力分散在太多的不同方向。过高估计了自己的能力。觉得没有必要为未来做准备。不肯花更大的精力和幕后工作的勤奋代价，来获取更高的殊荣。不切实际地希望所有的工作都要有趣味。很难全神贯注，经常性地走神。异想天开，难以预料。
        </a>
        <a>
            <div style="text-align: center"><h3 style="color: yellow">黄色</h3>
                行动迅速 死不认错<br>
                善于忠告 控制欲强<br>
                不感情用事 咄咄逼人<br>
                坚持不懈 容易发怒<br></div>
            <h4>【性格优势】：</h4>
            <h5>作为个体：</h5>不达目标，誓不罢休。不停地给自己设定目标以推动前进。把生命当成竞赛。行动迅速，活力充沛。意志坚强。自信、不情绪化，而且非常有活力。坦率，直截了当，一针见血。强烈的进取心，居安思危。独立性强。有强烈的求胜欲。不畏强权并敢于冒险。不易气馁，不在乎外界的评价，坚持自己所选择的道路和方向。危难时刻挺身而出。讲究速度和效率。敢于接受挑战并渴望成功。
            <h5>沟通特点：</h5>以务实的方式主导会谈。喜欢主导整个事情进行的方式。能够直接抓住问题的本质。说话用字简明扼要，不喜欢拐弯抹角。不受情绪干扰和控制。
            <h5>作为朋友：</h5>给予解决问题的方法，而非纠缠在过去。迅速提出忠告和方向。直言不讳地提出建议。
            <h5>对待工作和事业：</h5>动作干净利落，讲求效率。能够承担长期高强度的压力。强烈的目标趋向，善于设定目标。高瞻远瞩，有全局观念。善于委派工作。坚持不懈，促成活动。掌握重点执行。行事作风明快。天生的领导者和富有组织能力。竞争越强，精力越旺，愈挫愈勇。寻求实际的解决方法。以结果和完成任务为导向，并且高效率。善于快速决策并处理所遇到的一切问题。富有责任感。
            <h4>【性格过当】：</h4>
            <h5>作为个体：</h5>自己永远是对的，死不认错。趾高气扬，霸道。只关注自己的感受，不体贴别人的心情和想法。以自我为中心，自私倾向。霸道。脾气暴躁，容易发怒。缺少同情心。傲慢自大，目中无人。经常紧绷自己的情绪。在情绪不佳或有压力的时候，经常会不可理喻与独断专行。不喜欢受群体所规范约束,打破既定规则且自己不遵守规则。
            <h5>沟通特点：</h5>喜欢争辩和冲突。铁石心肠，对情绪表现冷淡。粗线条，简单粗暴。毫无敏感，无力洞察他人内心和理解他人所想。抗拒批评，严酷且自以为是的审判者。缺乏亲密分享的能力。缺乏耐心，是非常糟糕的倾听者。态度尖锐严厉，批判性强。容易让他人的工作或生活步调紧张。不习惯赞美别人。说话有时咄咄逼人。控制欲强。不太能体谅他人，对行事模式不同的人缺少包容度。
            <h5>作为朋友：</h5>大多时候仅保持理性的友谊。讨厌与犹豫不决、能力弱的人互动。试图控制和影响大家的活动，希望他人服从自己而非配合别人。除了工作内容，很少交谈其它话题。情感上习惯与人保持一定的距离。很少对人流露出直接诚挚的关怀。需要你的时候才找你。为别人做主。
            <h5>对待工作和事业：</h5>生活在无尽的工作当中而不是人群中。数量远比质量重要。目标没有完成时，容易发怒且迁怒于人。寻求更多的权力，有极强的控制欲。拒绝为自己和他人放松。完成工作第一，人的事情第二。为了自己的面子，不妥协且毫不认错。对于竞争结果过分关注而忽略过程中的乐趣。武断，刚愎自用且一意孤行。很难慢下来，缺少生命乐趣的工作狂。未明察就急于改变，急于求成。

        </a>
        <a>
            <div style="text-align: center"> <h3 style="color: deepskyblue">蓝色</h3>
                思想深邃 情感脆弱<br>
                默默关怀他人 喜好批判和挑剔<br>
                敏感而细腻 不主动与人沟通<br>
                计划性强 患得患失<br></div>
            <h4>【性格优势】：</h4>
            <h5>作为个体：</h5>严肃的生活哲学。思想深邃，独立思考而不盲目从众。沉默寡言，老成持重。注重承诺，可靠安全。谨慎而深藏不露。坚守原则，责任心强。遵守规则，井井有条。深沉有目标的理想主义。敏感细腻。高标准，追求完美。谦和稳健。善于分析，富有条理。待人忠诚，富有自我牺牲精神。深思熟虑，三思而后行。坚韧执着。
            <h5>沟通特点：</h5>享受敏感而有深度的交流。设身处地地体会他人。能记住谈话时共鸣的感情和思想。喜欢小群体交流的思想碰撞。关注谈话的细节。
            <h5>作为朋友：</h5>默默地为他人付出以表示关切和爱。对友谊忠诚不渝。真诚关怀朋友的境遇，善于体贴他人。能够记得特殊的日子。遭遇难关时，极力给予鼓舞安慰。很少向他人表达内心的看法。经常扮演解决分析问题的角色。
            <h5>对待工作和事业：</h5>强调制度、程序、规范、细节和流程。做事之前首先计划且严格按照计划去执行。喜欢探究及根据事实行事。尽忠职守，追求卓越。高度自律。喜欢用表格、数字的管理来验证效果。注重承诺。一丝不苟地执行工作。
            <h4>【性格过当】：</h4>
            <h5>作为个体：</h5>高度负面的情绪化。猜忌心重，不信任他人。太在意别人的看法和评价，容易被负面评价中伤。容易沮丧，悲观消极。陷于低落的情绪无法自拔。情感脆弱抑郁，有自怜倾向。杞人忧天，庸人自扰。最容易的抑郁症患者。当别人轻易成功时，会因自己的努力付出却不如他人而心生嫉妒。过于阴沉的面孔，让人感觉压抑，不易接近。
            <h5>沟通特点：</h5>不知不觉地说教和上纲上线。原则性强，不易妥协。强烈期待别人具有敏感度和深度能够理解自己。以为别人能够读懂自己的心思。不太主动与人沟通。不喜欢制造困扰麻烦给别人，也讨厌别人制造困扰麻烦给自己。要真诚开放心胸与人互动会比较难。习惯以防卫的状态面对别人。
            <h5>作为朋友：</h5>过度敏感，有时很难相处。强烈的不安全感。远离人群。喜好批判和挑剔。吝于宽恕。经常怀疑别人的话，不容易相信他人。对待工作和事业对自己和他人常寄予过高而且不切实际的期望。过度计划和过度绸缪。患得患失，行动缓慢。较真，挑剔他人及自己的表现。专注于小细节，因小失大。吝啬表扬，强烈的形式主义。容易被不理想的成绩击垮斗志。墨守成规，死板教条不懂变通。为了维护原则缺乏妥协精神。
        </a>
        <a>
            <div style="text-align: center"><h3 style="color: lawngreen">绿色</h3>
                温柔祥和 拒绝改变<br>
                为他人考虑 胆小被动<br>
                心平气和 没有主见<br>
                善于协调 缺乏创意<br></div>
            <h4>【性格优势】：</h4>
            <h5>作为个体：</h5>爱静不爱动，有温柔祥和的吸引力和宁静愉悦的气质。和善的天性，做人厚道。追求人际关系的和谐。奉行中庸之道，为人稳定低调。遇事以不变应万变，镇定自若。知足常乐，心态轻松。追求平淡的幸福生活。有松弛感，能融入所有的环境和场合。从不发火，温和、谦和、平和三和一体。做人懂得“得饶人处且饶人”。追求简单随意的生活方式。沟通特点以柔克刚，不战而屈人之兵。避免冲突，注重双赢。心平气和且慢条斯理。善于接纳他意见。最佳的倾听者，极具耐心。擅长让别人感觉舒适。有自然和不经意的冷幽默。松弛大度，不急不徐。
            <h5>作为朋友：</h5>从无攻击性。富有同情和关心。宽恕他人对自己的伤害。能接纳所有不同性格的人。和善的天性及圆滑的手腕。对友情的要求不严苛。处处为别人考虑，不吝付出。与之相处轻松自然又没有压力。最佳的垃圾宣泄处，鼓励他们的朋友多谈自己。从不尝试去改变他人。
            <h5>对待工作和事业：</h5>高超的协调人际关系的能力。善于从容地面对压力。巧妙地化解冲突。能超脱游离政治斗争之外，没有敌人。缓步前进以取得思考空间。注重人本管理。推崇一种员工都积极参与的工作环境。尊重员工的独立性，从而博得人心和凝聚力。善于为别人着想。以团体为导向。创造稳定性。用自然低调的行事手法处理事务。
            <h4>【性格过当】：</h4>
            <h5>作为个体：</h5>按照惯性来做事，拒绝改变，对于外界变化置若罔闻。懒洋洋的作风，原谅自己的不思进取。懦弱胆小，纵容别人欺压自己。期待事情会自动解决，完全守望被动。得过且过。无原则地妥协，而无法促使他们采取负责任的解决态度。逃避问题与冲突。太在意别人反应，不敢表达自己的立场和原则。
            <h5>沟通特点：</h5>一拳打在棉花上，毫无反应。没有主见，把压力和负担通通转嫁到他人身上。不会拒绝他人，给自己和他人都带来无穷麻烦。行动迟钝，慢慢腾腾。避免承担责任。
            <h5>作为朋友：</h5>不负责任的和稀泥。姑息养奸的态度。压抑自己的感受以迁就别人。期待让人人满意，对自己的内心不忠诚。没有自我，迷失人生的方向。缺乏激情。漠不关心，惰于参与任何活动。
            <h5>对待工作和事业：</h5>安于现状，不思进取。乐于平庸，缺乏创意。害怕冒风险，缺乏自信。拖拖拉拉。缺少目标。缺乏自觉性。懒惰而不进取。宁愿做旁观者不肯做参与者。
        </a>
    </div>
    </div>
</div>
<table id="demo" lay-filter="test"></table>
<!--表内按钮-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
    <a shiro:hasPermission="character:result:del" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setMail">发送邮件</a>
</script>
</body>

<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        //第一个实例
        var myTable = table.render({
            elem: '#demo'
            , height: 500
            , url: '/result/selectAll' //数据接口
            , page: true //开启分页
            , limit: 10
            , limits: [5, 10, 15, 20, 50, 100]
            , autoSort: false
            ,toolbar: '#toolDemo'
            , cols: [
                [ //表头
                    {field: 'select', width: 50, type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'name', title: '测试人', width: 100, sort: true}
                    , {field: 'phone', title: '电话', width: 120}
                    , {field: 'time', title: '时间', width: 170}
                    , {field: 'red', title: '红色性格', width: 80, style: 'color: #FF5722;'}
                    , {field: 'yellow', title: '黄色性格', width: 80, style: 'color: #FFB800;'}
                    , {field: 'blue', title: '蓝色性格', width: 80, style: 'color: ##01AAED;'}
                    , {field: 'green', title: '绿色性格', width: 80, style: 'color: #009688;'}
                    ,{fixed: 'right',title:'操作', width:220, align:'center', toolbar: '#barDemo'}
                ]
            ]
        });
        //监听排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });
        //监听表头工具事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除选中的行么', function (index) {
                            //obj.del(); //删除对应行（tr）的DOM结构
                            //删除数据库中的数据
                            console.log(data)
                            var idList = [];
                            //遍历数组data，抽取所有的id
                            for (let i = 0; i < data.length; i++) {
                                idList[i] = (data[i].id);
                            }
                            $.ajax({
                                url: "/result/delete",
                                type: "delete",
                                dataType: "JSON",
                                data: {idList: idList},
                                success: function (ret) {
                                    if (ret.code == 0) {
                                        //刷新表格数据
                                        myTable.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                        });
                                        layer.msg(ret.msg, {icon: 6});
                                    } else {
                                        layer.msg(ret.msg, {icon: 5});
                                    }
                                }
                            })
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    }
                    break;
            }
            ;
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            let idList = [];
            idList.push(data.id);
            if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/result/delete",//路径
                        data: {idList: idList},//传递给后台的参数
                        dataType: "json",//相应的数据类型：服务器给我的
                        type: "delete",
                        success: function (data) {
                            //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                            if (data.code == 0) {
                                //关闭对话框
                                layer.closeAll();
                                //提示操作成功
                                layer.msg(data.msg, {icon: 6});
                                //刷新表格数据
                                myTable.reload({
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                layer.msg(data.msg, {icon: 6});
                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }

                        }
                    })
                })
            }
            else if (layEvent === 'detail') {
                console.log(data)
                //初始化饼状图
                var chartDom = document.getElementById('pieDemo');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '性格分析图',
                        subtext: '个人性格分布',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: [
                            '红',
                            '黄',
                            '蓝',
                            '绿'
                        ]
                    },
                    color: ['#ec0c0c', '#efed2f', '#12c2e7', '#40f633'],
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '性格颜色',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: data.red==null?0:data.red, name: '红色性格' },
                                { value: data.yellow==null?0:data.yellow, name: '黄色性格' },
                                { value: data.blue==null?0:data.blue, name: '蓝色性格' },
                                { value: data.green==null?0:data.green, name: '绿色性格' },
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);
                layer.open({
                    title: '查看详情',
                    type: 1,
                    maxmin: true,
                    area: ['900px', '450px'],
                    content: $("#testReport")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
            else if (layEvent === 'setMail'){
                form.val('addMailFormFilter',{
                    email:data.phone+"@163.com",
                })
                layer.open({
                    title: '发送信息',
                    type: 1,
                    area: ['550px', '400px'],
                    offset: '200px',
                    content: $("#addMail")
                });

                // 栏添加按钮弹出表单提交按钮触发事件
                form.on('submit(addMailFilter)', function (data) {
                    if(data.field.status!=0){
                        data.field.status=1;
                    }
                    data.field.updater = $("#updater").val();
                    $.ajax({
                        url: "/mail/setMail",
                        contentType: 'application/json;charset=UTF-8',
                        data:{"email": data.field.email,"text":data.field.text},
                        //data: JSON.stringify(data.field),
                        dataType: "json",
                        type: "get",
                        beforeSend:beforeSend, //发送请求
                        complete:complete,//请求完成
                        success: function (result) {
                            if (result.code == 0) {
                                layer.closeAll();
                                form.render();
                                table.reload('demo');
                                layer.msg(result.msg, {icon: 6});
                            } else {
                                layer.msg(result.msg, {icon: 5});
                            }
                        }
                    })
                })
            }
        });

        //提交条件查询
        form.on('submit(selectFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //提交表单数据
            $.ajax({
                url: "/result/selectAll",
                type: "get",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        //刷新表格数据
                        myTable.reload({
                            where: { //设定异步数据接口的额外参数，任意设
                                name: data.field.name
                                , phone: data.field.phone}
                            ,
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }

                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        ///重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    name: ""
                    , phone: ""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
    });

    function beforeSend(XMLHttpRequest){
        layer.open({
            title: '发送信息',
            type: 1,
            area: ['300px', '200px'],
            offset: '200px',
            content: $("#deng")
        });
        //$("#deng").append("<form><i class=\"layui-icon layui-icon-loading\"></i><i>请稍等...</i></form>");
    }
    function complete(XMLHttpRequest, textStatus){
        layer.clone({
            content: $("#deng")
        })
        //$("#deng").remove();
    }

    function download(){
        const element = $("#the1"); // 这个dom元素是要导出pdf的div容器
        var w = element.width(); // 获得该容器的宽
        var h = element.height(); // 获得该容器的高
        var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
        var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
        const canvas = document.createElement("canvas");
        var abs = 0;
        var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
        var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
        if(win_o>win_i){
            abs = (win_o - win_i)/2; // 获得滚动条长度的一半
        }
        canvas.width = w * 2; // 将画布宽&&高放大两倍
        canvas.height = h * 2;
        const context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-offsetLeft-abs,-offsetTop);
        // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉
        html2canvas(element[0]).then(function(canvas) {
            const contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else { // 分页
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('性格测试结果.pdf');
        })
    }
</script>
</html>